<ion-header class="bp-header">
  <ion-navbar>
    <ion-title>
      <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
        {{ 'Home' | translate }}
      </div>
    </ion-title>
    <ion-buttons *ngIf="isCordova && !isCopay" end>
      <button color="light" ion-button clear icon-only (click)="openBitPayIdPage()">
        <div [reveal-at-scroll-pos]="expandableHeader.headerHeight" [scrollArea]="scrollArea">
          <ion-icon *ngIf="!bitPayIdUserInfo">
            <img src="assets/img/bitpay-card/icon-bitpay-user.svg" width="25">
          </ion-icon>
          <ion-icon *ngIf="bitPayIdUserInfo && !bitPayIdUserInfo?.givenName">
            <img src="assets/img/bitpay-card/icon-bitpay.svg" width="25">
          </ion-icon>
          <ion-icon *ngIf="bitPayIdUserInfo && bitPayIdUserInfo?.givenName">
            <span class="icon-bitpay-id icon-small">
              <span class="account-initials">{{bitPayIdUserInfo?.givenName}}</span>
              <span class="account-initials">{{bitPayIdUserInfo?.familyName}}</span>
            </span>
          </ion-icon>
        </div>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content #scrollArea>
  <ion-refresher (ionRefresh)="doRefresh($event)" pullMin="90" pullMax="160" enabled="true">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
  <expandable-header [scrollArea]="scrollArea" [fadeFactor]="5" [disableFade]="true" #expandableHeader>
    <ion-toolbar class="wide-header__title" (click)="toggleTestnet()" tappable>
      <expandable-header-primary>
        <button *ngIf="isCordova && !isCopay" class="bitpay-id-login" color="light" ion-button clear icon-only large (click)="openBitPayIdPage()">
          <ion-icon *ngIf="!bitPayIdUserInfo">
            <img src="assets/img/bitpay-card/icon-bitpay-user.svg" width="35">
          </ion-icon>
          <ion-icon *ngIf="bitPayIdUserInfo && !bitPayIdUserInfo?.givenName">
            <img src="assets/img/bitpay-card/icon-bitpay.svg" width="35">
          </ion-icon>
          <ion-icon *ngIf="bitPayIdUserInfo && bitPayIdUserInfo?.givenName">
            <span class="icon-bitpay-id">
              <span class="account-initials">{{bitPayIdUserInfo?.givenName}}</span>
              <span class="account-initials">{{bitPayIdUserInfo?.familyName}}</span>
            </span>
          </ion-icon>
        </button>
        {{ 'Home' | translate }}
      </expandable-header-primary>
    </ion-toolbar>
  </expandable-header>

  <div class="message-background" *ngIf="accessDenied">
    <div class="message-header no-dismissible"></div>
    <div class="message-content">
      <ion-row align-items-center>
        <div class="message-icon"><img src="assets/img/icon-danger.svg" /></div>
        <div class="message-title message-title-critical">
          {{ 'Access denied' | translate }}
        </div>
      </ion-row>
      <div class="message-body">
        Unfortunately, your country/region has banned the use or acceptance of
        cryptocurrencies as a valid form of payment and we are therefore unable
        to service you.
      </div>
      <div>
        <div class="line-divider"></div>
        <span class="message-button" (click)="openCountryBannedLink()" translate>Learn more</span>
      </div>
    </div>
  </div>

  <div class="message-background" *ngIf="newReleaseAvailable">
    <div class="message-header">
      <ion-row justify-content-end>
        <button float-right ion-button clear icon-only color="grey" (click)="dismissNewReleaseMessage()">
          <ion-icon name="close"></ion-icon>
        </button>
      </ion-row>
    </div>
    <div class="message-content">
      <ion-row align-items-center>
        <div class="message-icon"><img src="assets/img/icon-update.svg" /></div>
        <div class="message-title">
          {{ 'There is a new version available' | translate }}
        </div>
      </ion-row>
      <div class="message-body" translate>
        An update to this app is available.
      </div>
    </div>
  </div>

  <div class="message-background" *ngIf="showServerMessage && serverMessages && serverMessages[0]">
    <div class="message-header" [ngClass]="{'no-dismissible': !serverMessages[0].dismissible}">
      <ion-row *ngIf="serverMessages[0].dismissible" justify-content-end>
        <button float-right ion-button clear icon-only color="grey" (click)="dismissServerMessage(serverMessages[0])">
          <ion-icon name="close"></ion-icon>
        </button>
      </ion-row>
    </div>
    <div class="message-content">
      <ion-row align-items-center>
        <div class="message-icon">
          <img *ngIf="!serverMessages[0].category || serverMessages[0].category === 'info'" src="assets/img/icon-info-blue.svg" />
          <img *ngIf="serverMessages[0].category === 'critical'" src="assets/img/icon-danger.svg" />
        </div>
        <div class="message-title" *ngIf="serverMessages[0].title" [ngClass]="{
            'message-title-info': !serverMessages[0].category || serverMessages[0].category == 'info',
            'message-title-critical': serverMessages[0].category == 'critical'
          }">
          {{ serverMessages[0].title }}
        </div>
      </ion-row>
      <div class="message-body" *ngIf="serverMessages[0].body">
        {{ serverMessages[0].body }}
      </div>

      <div *ngIf="serverMessages[0].link" (click)="openServerMessageLink(serverMessages[0].link)">
        <div class="line-divider"></div>
        <span class="message-button" *ngIf="serverMessages[0].linkText">{{ serverMessages[0].linkText }}</span>
        <span class="message-button" translate *ngIf="!serverMessages[0].linkText">Learn more</span>
      </div>
    </div>
  </div>

  <page-feedback-card #showCard></page-feedback-card>

  <div *ngIf="showTotalBalance" class="total-amount-container">
    <div class="section-header" translate>Total cash value</div>
    <div class="total-amount-value">
      <span *ngIf="totalBalanceAlternative">
        {{totalBalanceAlternative | number:'1.2-2'}} {{totalBalanceAlternativeIsoCode}}
      </span>
      <span *ngIf="fetchingStatus">
        <ion-spinner></ion-spinner>
      </span>
    </div>
    <div class="average-container">
      <div *ngIf="totalBalanceChange || totalBalanceChange === 0" [ngClass]="totalBalanceChange >= 0 ? 'possitive-avg' : 'negative-avg'">
        <span class="average"><span *ngIf="totalBalanceChange > 0">+</span>{{ totalBalanceChange | number: '1.2-2' }}%</span>
      </div>
      <span *ngIf="totalBalanceChange || totalBalanceChange === 0" class="date" translate>Last day</span>
    </div>
  </div>

  <ion-list margin-bottom class="bp-list">
    <button ion-item *ngIf="showShoppingOption" (click)="goToShop()">
      <ion-label>
        <div class="services-list-label" translate>Shop</div>
      </ion-label>
    </button>
    <div *ngIf="showShoppingOption" class="line-divider"></div>
    <button ion-item *ngIf="showBuyCryptoOption" (click)="goToAmountPage()">
      <ion-label>
        <div class="services-list-label" translate>Buy Crypto</div>
      </ion-label>
    </button>
    <div class="line-divider" *ngIf="showBuyCryptoOption"></div>
    <button ion-item *ngIf="showExchangeCryptoOption" (click)="goToExchangeCryptoPage()">
      <ion-label>
        <div class="services-list-label" translate>Exchange Crypto</div>
      </ion-label>
    </button>
    <div class="line-divider" *ngIf="showExchangeCryptoOption"></div>
  </ion-list>

  <ion-slides *ngIf="showAdvertisements && advertisements && advertisements[0] && !testingAdsEnabled" pager="true" (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let advertisement of advertisements">
      <div class="message-background no-margin">
        <div class="message-header" *ngIf="advertisement.dismissible">
          <ion-row justify-content-end>
            <button float-right ion-button clear icon-only color="grey" (click)="dismissAdvertisement(advertisement)">
              <ion-icon name="close"></ion-icon>
            </button>
          </ion-row>
        </div>
        <div class="message-content">
          <ion-row align-items-center>
            <ion-col align-self-start col-4>
              <div class="message-img">
                <img [ngClass]="{'card-img': advertisement.imgSrc === 'assets/img/bitpay-card/bitpay-card-mc-angled-plain.svg'}" src="{{advertisement.imgSrc}}" />
              </div>
            </ion-col>
            <ion-col col-8>
              <div class="message-title message-title-adv" *ngIf="advertisement.title">
                {{ advertisement.title }}
              </div>
              <div class="message-body message-body-adv" *ngIf="advertisement.body">
                {{ advertisement.body }}
              </div>
            </ion-col>
          </ion-row>
          <div *ngIf="advertisement.link" (click)="goTo(advertisement.link, advertisement.linkParams)">
            <div class="line-divider"></div>
            <span class="message-button" *ngIf="advertisement.linkText">{{advertisement.linkText}}</span>
          </div>
        </div>
      </div>
    </ion-slide>
  </ion-slides>

  <ion-slides *ngIf="showAdvertisements && testingAds && testingAds[0] && testingAdsEnabled" pager="true" (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let advertisement of testingAds">
      <div class="message-background no-margin">
        <div class="message-header" *ngIf="advertisement.dismissible">
          <ion-row justify-content-end>
            <button float-right ion-button clear icon-only color="grey" (click)="dismissAdvertisement(advertisement)">
              <ion-icon name="close"></ion-icon>
            </button>
          </ion-row>
        </div>
        <div class="message-content">
          <ion-row align-items-center>
            <ion-col align-self-start col-4>
              <div class="message-img">
                <img [ngClass]="{'card-img': advertisement.imgSrc === 'assets/img/bitpay-card/bitpay-card-visa.svg'}" src="{{advertisement.imgSrc}}" />
              </div>
            </ion-col>
            <ion-col col-8>
              <div class="message-title message-title-adv" *ngIf="advertisement.title">
                {{ advertisement.title }}
              </div>
              <div class="message-body message-body-adv" *ngIf="advertisement.body">
                {{ advertisement.body }}
              </div>
            </ion-col>
          </ion-row>
          <div *ngIf="advertisement.link" (click)="goTo(advertisement.link, advertisement.linkParams)">
            <div class="line-divider"></div>
            <span class="message-button" *ngIf="advertisement.linkText">{{advertisement.linkText}}</span>
          </div>
        </div>
      </div>
    </ion-slide>
  </ion-slides>

  <div class="section-header">
    <div translate>Exchange Rates</div>
    <div translate class="date-label">1D</div>
  </div>
  <exchange-rates #exchangeRates></exchange-rates>
</ion-content>
